<form> — Conteneur de formulaire

<form action="contact.php" method="POST">
    <!-- Champs du formulaire -->
</form>

GET pour la recherche · POST pour des données sensibles

<input> — Champ de saisie

Attributs essentiels de <input>

<label> — Étiquette de champ

Rôle : associe un texte descriptif à un champ

<label for="email-input">Email :</label>
<input type="email" id="email-input" name="email">

• Améliore l'accessibilité
• Zone cliquable agrandie

Toujours utiliser <label> avec les champs de formulaire

<textarea> — Texte multilignes

Rôle : saisie de texte long (commentaires, messages)

<label for="message">Votre message :</label>
<textarea id="message" name="message"
          rows="5" cols="40" required></textarea>

• rows : nombre de lignes visibles
• cols : nombre de colonnes

<select> — Liste déroulante

<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
    <option value="">-- Choisissez --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
</select>

• multiple : sélection multiple
• selected : option présélectionnée

<button> — Bouton

<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>

Préférez <button> à <input type="submit"> : plus flexible

<fieldset> et <legend>

Rôle : regrouper des champs liés

<fieldset>
    <legend>Informations personnelles</legend>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>
</fieldset>

• Améliore l'accessibilité
• Structure visuelle claire (bordure stylisable en CSS)

Exemple de formulaire complet

<form action="inscription.php" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>

    <label>
        <input type="checkbox" name="cgv" required>
        J'accepte les CGV
    </label>

    <button type="submit">Envoyer</button>
</form>

Validation HTML5

<input type="text" name="cp" pattern="[0-9]{5}" placeholder="75001">

Sécurité : toujours valider côté serveur également !